<!DOCTYPE html>
<html>
<head>
    <title>OSS in Browser</title>
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
</head>
<body>

<div class="form-group">
    <label>Select file</label>
    <input type="file"  name="file" id="file" multiple="multiple"  style="width:150px;" />
    <div id="dd" style="overflow: hidden;"></div>
</div>
<div class="form-group">
    <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
</div>
<br />
<div class="progress">
    <div id="progress-bar"
         class="progress-bar"
         role="progressbar"
         aria-valuenow="0"
         aria-valuemin="0"
         aria-valuemax="100" style="min-width: 1px;">
        0%
    </div>
</div>

<script>
    'use strict';
    var OSS = OSS.Wrapper;
    var STS = OSS.STS;
    var client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: '{{$AccessKeyId}}',
        accessKeySecret: '{{$AccessKeySecret}}',
        stsToken: '{{$SecurityToken}}',
        bucket: 'fbw',
        secure: true
    });
    var adminUserId = '{{$adminUserId}}';
    var timestamp=new Date().getTime();

    var applyTokenDo = function (func) {
        return func(client);
    };

    var progress = function (p) {
        return function (done) {
            var bar = document.getElementById('progress-bar');
            bar.style.width = Math.floor(p * 100) + '%';
            bar.innerHTML = Math.floor(p * 100) + '%';
            done();
            console.log(p)
        }
    };
    var timer=null;
    var schedule=function () {
        timer=setInterval(function() {//监听上传进度条的百分比
            var bar = document.getElementById('progress-bar');
            console.log(bar.innerHTML);
        },100)
    }
    var uploadFile = function (client) {
        var docObj = document.getElementById("file");
        var count=docObj.files;
        var filePath= "temp/" + adminUserId + "_" + timestamp; //文件路径：用户id＋时间戳
        // alert(count.length)
        for(var i=0; i<count.length; i++) {
            var file = document.getElementById('file').files[i];
            var key = filePath + "_" + i;
            console.log('key:'+ key);
            client.multipartUpload(key, file, {
                progress: progress
            }).then(function (res) {
                console.log('upload success: %j', res);
            });
        }
        return true;
    };

    window.onload = function () {
        document.getElementById('file-button').onclick = function () {
            applyTokenDo(uploadFile);
        }
    };
</script>
</body>
</html>

